<template>
	<view class="content" v-show="orderInfo">
		<view class="address-order">
			<view class="address" v-if="type == 'dzf'">
				<view class="name">
					<image src="https://www.sdxiecheng.cn/img/myaddress.png" mode=""></image>
					<text>鞋柜编号：{{ orderInfo.cabinet_name }}</text>
				</view>
				<view class="address-des">
					地址：{{ orderInfo.address }}
				</view>
			</view>
			<view class="order">
				<view class="order-li">
					<image :src="'https://www.sdxiecheng.cn/'+orderInfo.goods_image" mode=""></image>
					<view class="order-li-right">
						<view class="name">{{orderInfo.goods_title}}</view>
						<view class="des">{{orderInfo.goods_describle}}</view>
						<view class="price">¥{{orderInfo.original_price}}</view>
					</view>
				</view>
			</view>
		
			
		</view>
		<view class="order-info" >
			<view class="order-info-li">
				<view>洗鞋数量：</view>
				<text>{{ orderInfo.goods_num }}件</text>
			</view>
			<view class="order-info-li">
				<view>商品金额：</view>
				<text>￥{{orderInfo.original_price}}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.coupon_id">
				<view>优惠金额：</view>
				<text>￥{{orderInfo.coupon_fee}}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'card'">
				<view>会员支付：</view>
				<text>{{ orderInfo.card_type }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'balance'">
				<view>余额支付：</view>
				<text>￥{{orderInfo.goods_price}} </text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'wechat'">
				<view>微信支付：</view>
				<text>￥{{orderInfo.goods_price}} </text>
			</view>
			<view class="order-info-li">
				<view>下单时间：</view>
				<text>{{ orderInfo.createtime }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.deposittime">
				<view>存鞋时间：</view>
				<text>{{ orderInfo.deposittime }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.taketime">
				<view>取鞋时间：</view>
				<text>{{ orderInfo.taketime }}</text>
			</view>
			<view class="order-info-li">
				<view>订单编号：</view>
				<text>{{ orderInfo.order_sn }}</text>
			</view>
			<view class="order-info-li">
				<view>备注信息：</view>
				<text>{{ orderInfo.remark }}</text>
			</view>
			<view class="order-info-li shuxiang" >
				<view>附件：</view>
				<image style="margin-top: 20rpx;" v-if="orderInfo.enclosure_images" @click="previewImage(orderInfo.enclosure_images)" :src="orderInfo.enclosure_images" mode=""></image>
			</view>
			<view  v-if="type == 'sh'">
				<view class="shouhou-li" v-if="orderInfo.pay_type != 'card'">
					退款金额：￥{{ orderInfo.goods_price }}
				</view>
				<view class="shouhou-li">
					<view>退款原因</view>
					<textarea   :disabled="true" v-model="orderInfo.refund_desc"  />
				</view>
				<!-- <view class="btn-box" style="padding-bottom: 0;">
					<button class="u-reset-button btn3" >提交</button>
				</view> -->
			</view>
			<view class="peisong" v-if="type == 'ywc' || type == 'dqx'">
				<view class="title">
					配送信息
				</view>
				<view class="order-info-li" v-if="orderInfo.cabinet_name">
					<view>鞋柜：</view>
					<text>{{ orderInfo.cabinet_name }} <text v-if="orderInfo.kshoecase_name">{{ orderInfo.kshoecase_name }}</text>号柜门</text>
				</view>
				<view class="order-info-li" v-if="orderInfo.address">
					<view>地址：</view>
					<text>{{ orderInfo.address }}</text>
				</view>
				<view class="order-info-li" v-if="orderInfo.ktaketime">
					<view>取鞋时间：</view>
					<text>{{ orderInfo.ktaketime }}</text>
				</view>
				<view class="order-info-li" v-if="orderInfo.kdeposittime">
					<view>存鞋时间：</view>
					<text>{{ orderInfo.kdeposittime }}</text>
				</view>
				<view class="image-list">
					<view class="image-li" v-if="orderInfo.take_shoes_images" @click="previewImage(orderInfo.take_shoes_images)">
						<image :src="orderInfo.take_shoes_images" mode=""></image>
						<text>取鞋留证</text>
					</view>
					<view class="image-li" v-if="orderInfo.store_shoes_images" @click="previewImage(orderInfo.store_shoes_images)">
						<image :src="orderInfo.store_shoes_images" mode=""></image>
						<text>存鞋留证</text>
					</view>
					<!-- <view class="image-li" @click="previewImage(orderInfo.store_shoes_ewm_image)">
						<image :src="orderInfo.store_shoes_ewm_image" mode=""></image>
						<text>取鞋二维码</text>
					</view> -->
				</view>
			</view>
			<view class="btn-box" v-if="type == 'dqx'">
				<button class="u-reset-button btn3" @click="isPay(1)">打开柜门</button>
				
			</view>
			<view class="btn-box" v-if="type == 'xxz' && type == 'ywc'">
					<button class="u-reset-button btn3" style="margin-top: 40rpx;" @click="isPay(2)">再次开门</button>
			</view>
		
		</view>
		
		<!-- 底部按钮 -->
		<view class="order-bottom-box" v-if="type == 'dcx'">
			<view class="order-bottom-info">
				<view class="price">
					<!-- 实付金额： -->
					<!-- <text>¥8.00</text> -->
				</view>
				<view class="" style="display: flex;">
					<button  class="u-reset-button" @click="isPay(1)">打开柜门</button>
				</view>
				
			</view>
		</view>
		<view class="order-bottom-box" v-if="type == 'xxz' || type == 'ywc' ">
			<view class="order-bottom-info">
				<view class="price">
					<!-- 实付金额： -->
					<!-- <text>¥8.00</text> -->
				</view>
				<view class="" style="display: flex;">
					<button  class="u-reset-button" @click="isPay(2)" style="margin-left:20rpx;">再次开门</button>
				</view>
				
			</view>
		</view>
		<!-- 开柜子弹窗 -->
		<!-- 取消订单 -->
		<u-modal v-model="guiziShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle"
			@confirm="isOpenGuiZi"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>
						打开柜门
					</text>
					<text>
						请确保本人在柜子前面
						</text>
				</view>
			</view>
		</u-modal>
		<!-- 柜子打开成功 -->
		<u-modal v-model="guiziChengGongShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" 
			:confirm-style="confirmStyle"
			confirm-text="完成"
			@confirm="caozuowancheng"
			
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text style="color: #FF9A33;">
						 {{ num }} 号
					</text>
					<text v-if="type == 'dcx'">
						柜门已打开，请存鞋
					</text>
					<text v-if="type == 'dqx'">
						柜门已打开，请取鞋
					</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:'',
				guiziShow:false,
				guiziChengGongShow:false,
				confirmStyle:{
					'borderLeft': '1px solid #EEEEEE'
				},
				type:'',
				id:'',
				orderInfo:'',
				num:'',
				index:0,
				opentype:1
			}
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			this.id = e.id
			this.index = e.index-0
			this.getDcxOrder()
		},
		methods: {
			isPay(val){
				this.guiziShow = true
				this.opentypes = val
			},
			// 待存订单详情
			getDcxOrder(){
				uni.$u.http.post('/order/detail',{
					id:this.id
				}).then(res =>{
					console.log(res)
					this.orderInfo = res.data
				})
			},
			// 预览图片
			previewImage(url){
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			caozuowancheng(){
				this.guiziChengGongShow = false
				uni.$emit('updateOrder',{index:this.index})
			},
			isOpenGuiZi(){
				let that = this
				this.guiziShow = false
				uni.showLoading({
					title:'柜子打开中。。。'
				})
				if(this.type == 'dcx' || this.type == 'xxz'){
					uni.$u.http.post('/device/open_cshoe',{
						id:this.$store.state.shoecabinet_id,
						order_id:this.orderInfo.id,
						opentype:this.opentypes
					}).then(res =>{
						if (res.code == 200) {
							that.guiziChengGongShow = true
							that.num = res.data.info
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					}).catch(err =>{
						console.log(err)
						uni.showToast({
							icon:'none',
							title:err.data.msg
						})
					})
				}else if(this.type == 'dqx' || this.type == 'ywc'){
					uni.$u.http.post('/device/open_save',{
						id:this.$store.state.shoecabinet_id,
						order_id:this.orderInfo.id,
						opentype:this.opentypes
					}).then(res =>{
						that.guiziChengGongShow = true
						that.num = res.data.info
						uni.hideLoading()
						console.log(res)
					}).catch(err =>{
						console.log(err)
						uni.showToast({
							icon:'none',
							title:err.data.msg
						})
					})
				}
				
				
				
			}
		}
	}
</script>

<style lang="less">
	.content{
		padding: 10rpx 20rpx;
	}
.address-order{
	background: #FFFFFF;
	border-radius: 10rpx;
	.address{
		padding: 30rpx;
		padding-bottom: 40rpx;
		background: url('https://www.sdxiecheng.cn/img/address-line.png') bottom no-repeat;
		background-size: 100%;
		.name{
			image{
				width: 24rpx;
				height: 30rpx;
				margin-right: 19rpx;
			}
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 27rpx;
		}
		.address-des{
			color: 24rpx;
			color: #666666;
		}
	}
}
// 订单样式
.order{
	padding: 0 9rpx;
	padding-top: 34rpx;
	.order-li{
		display: flex;
		align-items: center;
		padding-bottom: 35rpx;
		image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
		.order-li-right{
			width: calc(100% - 150rpx);
			padding-left: 20rpx;
			.name{
				font-size: 30rpx;
			}
			.des{
				font-size: 24rpx;
				margin-top: 9rpx;
				margin-bottom: 9rpx;
			}
			.price{
				font-size: 36rpx;
				font-weight: 500;
				color: #FF9A33;
			}
		}
		
	}
}
// 订单信息
.order-info{
	min-height: calc(100vh - 370rpx);
	background: #FFFFFF;
	// border-radius: 10rpx;
	border-radius:  0 0 10rpx 10rpx;
	border-top: 1px solid #EEEEEE;
	// margin-top: 20rpx;
	padding: 39rpx 21rpx;
	.order-info-li{
		display: flex;
		align-items: center;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.shuxiang{
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.name{
			margin-bottom: 20rpx;
		}
		image{
			width: 209rpx;
			height: 209rpx;
		}
	}
}
// 配送信息
.peisong{
	margin-top: 50rpx;
	.title{
		font-size: 30rpx;
		font-weight: 500;
	}
	.image-list{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.image-li{
		width: 180rpx;
		margin-right: 30rpx;
		image{
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 18rpx;
		}
		text{
			font-size: 28rpx;
			color: #7C7C7C;
			text-align: center;
		}
	}
}
.btn-box{
	padding-bottom: 98rpx;
	.btn3{
		width: 650rpx;
		height: 80rpx;
		background: #FBAA27;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 150rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
	}
}

// 底部按钮
.order-bottom-box{
	width: 100%;
	height: 98rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	padding: 0 30rpx;
	.order-bottom-info{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price{
			font-size: 36rpx;
			font-weight: 500;
			text{
				color: #FF9A33;
			}
		}
		button{
			margin: 0 ;
			width: 200rpx;
			height: 70rpx;
			border-radius: 35rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FF9A33;
		}
	}
}
// 售后
.shouhou-li{
	font-size: 30rpx;
	font-weight: 500;
	line-height: 60rpx;
	textarea{
		width: 100%;
		height: 200rpx;
		border: 2rpx solid #F2F2F2;
		padding: 20rpx;
		font-weight: normal;
		margin-top: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		line-height: normal;
	}
}
</style>
